<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/template/index.xhtml">
	<ui:define name="titulo">Catalogo</ui:define>
	<ui:define name="contenido">
		<h:form>
			<p:tabView id="tabView"
				value="#{controladorCategoria.listarCategorias()}" var="categoria">
				<p:tab id="tabCategoria" title="#{categoria.nombre}">
					<p:dataTable
						value="#{controladorCategoria.listarProductosPorCategoria(categoria.id)}"
						var="producto">
						<p:column>
							<f:facet name="header">
								<h:outputText value="Nombre" />
							</f:facet>
							<h:outputText value="#{producto.nombre}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Descripcion" />
							</f:facet>
							<h:outputText value="#{producto.descripcion}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Precio" />
							</f:facet>
							<h:outputText value="#{producto.precioPublico}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Foto" />
							</f:facet>
							<h:graphicImage
								value="/FotoProductoServlet?idProducto=#{producto.id}"
								style="width:50px; height:50px" />
						</p:column>
					</p:dataTable>
				</p:tab>
			</p:tabView>
		</h:form>
	</ui:define>
</ui:composition>
</h:html>